import React, { useState } from 'react'
import Tooltip from './Tooltip'

/**
 * AI 3D 模型生成高级设置组件
 * 用于调整生成参数以优化模型质量
 */
export default function GenerationSettings({ onSettingsChange, mode = 'single' }) {
  const [settings, setSettings] = useState({
    // 核心参数
    enable_pbr: true,        // 物理渲染材质
    should_remesh: true,     // 网格重建
    should_texture: true,    // 纹理生成
    
    // 高级参数
    topology: 'triangle',    // 'quad' or 'triangle'
    target_polycount: 'auto', // 'low' | 'medium' | 'high' | 'auto'
    
    // 质量参数
    texture_resolution: 2048, // 1024, 2048, 4096
    ai_model: 'preview-v2.1-0'  // AI模型版本
  })

  const [showAdvanced, setShowAdvanced] = useState(false)

  // 更新设置并通知父组件
  const updateSetting = (key, value) => {
    const newSettings = { ...settings, [key]: value }
    setSettings(newSettings)
    onSettingsChange?.(newSettings)
  }

  return (
    <div className="bg-white/5 backdrop-blur-sm rounded-xl border border-white/10 p-4 space-y-4">
      {/* 标题 */}
      <div className="flex items-center justify-between">
        <div className="flex items-center space-x-2">
          <svg className="w-5 h-5 text-accent-blue" fill="currentColor" viewBox="0 0 20 20">
            <path fillRule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clipRule="evenodd" />
          </svg>
          <h3 className="text-white font-semibold">生成设置</h3>
        </div>
        <button
          onClick={() => setShowAdvanced(!showAdvanced)}
          className="text-xs text-accent-blue hover:text-accent-cyan transition-colors"
        >
          {showAdvanced ? '隐藏高级选项 ▲' : '显示高级选项 ▼'}
        </button>
      </div>

      {/* 基础设置 */}
      <div className="space-y-3">
        {/* 物理渲染材质 */}
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-2">
            <label className="text-sm text-gray-300">物理渲染材质 (PBR)</label>
            <Tooltip content="启用更真实的光照和材质效果，适合产品展示">
              <svg className="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
              </svg>
            </Tooltip>
          </div>
          <label className="relative inline-flex items-center cursor-pointer">
            <input
              type="checkbox"
              checked={settings.enable_pbr}
              onChange={(e) => updateSetting('enable_pbr', e.target.checked)}
              className="sr-only peer"
            />
            <div className="w-11 h-6 bg-gray-600 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-accent-blue/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-accent-blue"></div>
          </label>
        </div>

        {/* 网格优化 */}
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-2">
            <label className="text-sm text-gray-300">网格优化</label>
            <Tooltip content="重新构建网格，获得更平滑的表面">
              <svg className="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
              </svg>
            </Tooltip>
          </div>
          <label className="relative inline-flex items-center cursor-pointer">
            <input
              type="checkbox"
              checked={settings.should_remesh}
              onChange={(e) => updateSetting('should_remesh', e.target.checked)}
              className="sr-only peer"
            />
            <div className="w-11 h-6 bg-gray-600 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-accent-blue/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-accent-blue"></div>
          </label>
        </div>

        {/* 纹理生成 */}
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-2">
            <label className="text-sm text-gray-300">纹理生成 ⚠️ 必须开启才有颜色</label>
            <Tooltip content="自动生成彩色纹理贴图 - 关闭后模型将是纯色/黑白">
              <svg className="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
              </svg>
            </Tooltip>
          </div>
          <div className="flex items-center space-x-2">
            <span className={`text-xs font-bold transition-colors ${settings.should_texture ? 'text-emerald-500' : 'text-red-500'}`}>
              {settings.should_texture ? '✓ 开启' : '✕ 关闭'}
            </span>
            <label className="relative inline-flex items-center cursor-pointer">
              <input
                type="checkbox"
                checked={settings.should_texture}
                onChange={(e) => updateSetting('should_texture', e.target.checked)}
                className="sr-only peer"
              />
              <div className="w-11 h-6 bg-gray-600 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-accent-blue/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-accent-blue"></div>
            </label>
          </div>
        </div>
      </div>

      {/* 高级设置 */}
      {showAdvanced && (
        <div className="space-y-3 pt-3 border-t border-white/10 animate-scale-in">
          {/* 模型面数 */}
          <div className="space-y-2">
            <div className="flex items-center space-x-2">
              <label className="text-sm text-gray-300">模型精度</label>
              <Tooltip content="面数越高，模型越精细，但文件越大">
                <svg className="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                  <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
                </svg>
              </Tooltip>
            </div>
            <div className="grid grid-cols-4 gap-2">
              {['auto', 'low', 'medium', 'high'].map((level) => (
                <button
                  key={level}
                  onClick={() => updateSetting('target_polycount', level)}
                  className={`
                    px-3 py-2 rounded-lg text-xs font-medium transition-all
                    ${settings.target_polycount === level
                      ? 'bg-accent-blue text-white shadow-lg'
                      : 'bg-white/5 text-gray-400 hover:bg-white/10'
                    }
                  `}
                >
                  {level === 'auto' ? '自动' : level === 'low' ? '低' : level === 'medium' ? '中' : '高'}
                </button>
              ))}
            </div>
            <p className="text-xs text-gray-500">
              {settings.target_polycount === 'auto' && '自动选择最佳面数'}
              {settings.target_polycount === 'low' && '~5K 面，适合移动端'}
              {settings.target_polycount === 'medium' && '~10K 面，平衡性能'}
              {settings.target_polycount === 'high' && '~30K 面，高精度展示'}
            </p>
          </div>

          {/* 拓扑类型 */}
          <div className="space-y-2">
            <div className="flex items-center space-x-2">
              <label className="text-sm text-gray-300">网格类型</label>
              <Tooltip content="四边形适合后期编辑，三角形适合实时渲染">
                <svg className="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                  <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
                </svg>
              </Tooltip>
            </div>
            <div className="grid grid-cols-2 gap-2">
              <button
                onClick={() => updateSetting('topology', 'triangle')}
                className={`
                  px-3 py-2 rounded-lg text-xs font-medium transition-all
                  ${settings.topology === 'triangle'
                    ? 'bg-accent-blue text-white shadow-lg'
                    : 'bg-white/5 text-gray-400 hover:bg-white/10'
                  }
                `}
              >
                三角形 ▲
              </button>
              <button
                onClick={() => updateSetting('topology', 'quad')}
                className={`
                  px-3 py-2 rounded-lg text-xs font-medium transition-all
                  ${settings.topology === 'quad'
                    ? 'bg-accent-blue text-white shadow-lg'
                    : 'bg-white/5 text-gray-400 hover:bg-white/10'
                  }
                `}
              >
                四边形 ◼
              </button>
            </div>
          </div>

          {/* 纹理分辨率 */}
          <div className="space-y-2">
            <div className="flex items-center space-x-2">
              <label className="text-sm text-gray-300">纹理分辨率</label>
              <Tooltip content="更高的分辨率获得更清晰的材质">
                <svg className="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                  <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
                </svg>
              </Tooltip>
            </div>
            <div className="grid grid-cols-3 gap-2">
              {[1024, 2048, 4096].map((res) => (
                <button
                  key={res}
                  onClick={() => updateSetting('texture_resolution', res)}
                  className={`
                    px-3 py-2 rounded-lg text-xs font-medium transition-all
                    ${settings.texture_resolution === res
                      ? 'bg-accent-blue text-white shadow-lg'
                      : 'bg-white/5 text-gray-400 hover:bg-white/10'
                    }
                  `}
                >
                  {res}px
                </button>
              ))}
            </div>
          </div>
        </div>
      )}

      {/* 预设方案 */}
      <div className="pt-3 border-t border-white/10">
        <label className="text-xs text-gray-400 mb-2 block">快速预设</label>
        <div className="grid grid-cols-3 gap-2">
          <button
            onClick={() => {
              const preset = {
                enable_pbr: true,
                should_remesh: true,
                should_texture: true,
                topology: 'triangle',
                target_polycount: 'medium',
                texture_resolution: 2048
              }
              setSettings(preset)
              onSettingsChange?.(preset)
            }}
            className="px-3 py-2 bg-green-500/20 text-green-400 rounded-lg text-xs font-medium hover:bg-green-500/30 transition-all"
          >
            ⚡ 快速
          </button>
          <button
            onClick={() => {
              const preset = {
                enable_pbr: true,
                should_remesh: true,
                should_texture: true,
                topology: 'triangle',
                target_polycount: 'high',
                texture_resolution: 4096
              }
              setSettings(preset)
              onSettingsChange?.(preset)
            }}
            className="px-3 py-2 bg-purple-500/20 text-purple-400 rounded-lg text-xs font-medium hover:bg-purple-500/30 transition-all"
          >
            💎 高质量
          </button>
          <button
            onClick={() => {
              const preset = {
                enable_pbr: true,
                should_remesh: true,
                should_texture: true,
                topology: 'quad',
                target_polycount: 'medium',
                texture_resolution: 2048
              }
              setSettings(preset)
              onSettingsChange?.(preset)
            }}
            className="px-3 py-2 bg-blue-500/20 text-blue-400 rounded-lg text-xs font-medium hover:bg-blue-500/30 transition-all"
          >
            🎨 可编辑
          </button>
        </div>
      </div>
    </div>
  )
}

